<template>
    <div style="display: flex;width: 100%;height: 100vh;">

        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 120px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">

                    <!-- 对应列的宽度 -->
                    <div :style='样式1'>
                        <h4>对应列的宽度 : </h4>
                        <spen :style='样式2'>英:width,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.width' size='small' @change="提交改变">
                            <el-radio label="100px">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 -->
                    <div :style='样式1'>
                        <h4>对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 : </h4>
                        <spen :style='样式2'>英:min-width,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["min-width"]' size='small' @change="提交改变">
                            <el-radio label="50px">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 列是否固定在左侧或者右侧。 true 表示固定在左侧 -->
                    <div :style='样式1'>
                        <h4>列是否固定在左侧或者右侧。 true 表示固定在左侧 : </h4>
                        <spen :style='样式2'>英:fixed,类型:string / boolean,默认:true / 'left' / 'right'</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fixed' size='small' @change="提交改变">
                            <el-radio label="left">左侧 </el-radio>
                            <el-radio label="right">右侧 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 -->
                    <div :style='样式1'>
                        <h4>对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 : </h4>
                        <spen :style='样式2'>英:sortable,类型:boolean / string,默认:custom</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.sortable' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number -->
                    <div :style='样式1'>
                        <h4>指定排序方法，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number : </h4>
                        <spen :style='样式2'>英:sort-method,类型:function(a, b),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":sort-method"]' size='small' @change="提交改变">
                            <el-radio label="排序方法">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>


                    <!-- 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） -->
                    <div :style='样式1'>
                        <h4>对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） : </h4>
                        <spen :style='样式2'>英:resizable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.resizable' size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当内容过长被隐藏时显示 tooltip -->
                    <div :style='样式1'>
                        <h4>当内容过长被隐藏时显示 tooltip : </h4>
                        <spen :style='样式2'>英:show-overflow-tooltip,类型:boolean \,默认:object 2.2.28</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["show-overflow-tooltip"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 对齐方式 -->
                    <div :style='样式1'>
                        <h4>对齐方式 : </h4>
                        <spen :style='样式2'>英:align,类型:string,默认:left / center / right</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.align' size='small' @change="提交改变">
                            <el-radio label="left">靠左 </el-radio>
                            <el-radio label="center">居中 </el-radio>
                            <el-radio label="right">靠右 </el-radio>
                            <el-radio :label=null>无</el-radio>

                        </el-radio-group></div>
                    <!-- 表头对齐方式， 若不设置该项，则使用表格的对齐方式 -->
                    <div :style='样式1'>
                        <h4>表头对齐方式， 若不设置该项，则使用表格的对齐方式 : </h4>
                        <spen :style='样式2'>英:header-align,类型:string,默认:left / center / right</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["header-align"]'
                            size='small' @change="提交改变">
                            <el-radio label="left">靠左 </el-radio>
                            <el-radio label="center">居中 </el-radio>
                            <el-radio label="right">靠右 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>


                    <!-- 数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 -->
                    <div :style='样式1'>
                        <h4>数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 : </h4>
                        <spen :style='样式2'>英:reserve-selection,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["reserve-selection"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                
                </el-scrollbar>
            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-table :data="绑定列表值" style="width: 90%; margin:auto ; margin-top:20px "  >
                <el-table-column type="selection" width="55" /> <!--  多选例子 -->
                <el-table-column type="index" width="55" label="序号" /> <!--  多选例子 -->
                <el-table-column prop="data" label="Data" v-bind="属性" />
                <el-table-column align="right" width="180">
                    <template #header> <!--  头部范围 -->
                        <el-input v-model="输入框数据" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope"> <!--  列表范围 并且用 scope 来获取行数据 -->
                        <el-button size="small" @click="左按钮事件(scope.$index, scope.row)">左按钮</el-button>
                        <el-button size="small" type="danger"
                            @click="右按钮事件(scope.$index, scope.row)">右按钮</el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 25 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 20px;"/>
        </div>
    </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import{getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value)
    代码.value=结果
}

const 排序方法 =(a,b)=>{
    console.log("排序")
     return a>b }
const 绑定列表值 = [
	{
	  data: '不错'
	},
	{
	  data: '这是一句非常长的话 非常好 非常的不错 非常不错的例子 这是一句非常长的话 非常好 非常的不错 非常不错的例子 非常的不错 非常不错的例子'
	},
	{
	  data: '2016-05-04',
	},

  ]

  // 下面是两个按钮的方法
  const 左按钮事件 = (index, row) => {
	console.log(index, row)
  }
  const 右按钮事件 = (index, row) => {
	console.log(index, row)
  }
  const 输入框数据 = ref('') //头部input关联的数据

const 组件名 = ref('表格列')
const 属性 = ref({
    //type:null,//对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
    index:null,//如果设置了 type=index，可以通过传递 index 属性来自定义索引
   // label:null,//显示的标题
    'column-key':null,//column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
   // prop:null,//字段名称 对应列内容的字段名， 也可以使用 property属性
    width:null,//对应列的宽度
    'min-width':null,//对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
    fixed:null,//列是否固定在左侧或者右侧。 true 表示固定在左侧
    'render-header':null,//列标题 Label 区域渲染使用的 Function
    sortable:null,//对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
    ':sort-method':null,//指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number
    'sort-by':null,//指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推
    'sort-orders':null,//数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
    resizable:null,//对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
    formatter:null,//用来格式化内容
    'show-overflow-tooltip':null,//当内容过长被隐藏时显示 tooltip
    align:null,//对齐方式
    'header-align':null,//表头对齐方式， 若不设置该项，则使用表格的对齐方式
    'class-name':null,//列的 className
    'label-class-name':null,//当前列标题的自定义类名
    selectable:null,//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
    'reserve-selection':null,//数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。
    filters:null,//数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
    'filter-placement':null,//过滤弹出框的定位
    'filter-multiple':null,//数据过滤的选项是否多选
    'filter-method':null,//数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
    'filtered-value':null,//选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。
})



const 重置组件=()=>{
    let 原生属性 = {
    //type:null,//对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
    index:null,//如果设置了 type=index，可以通过传递 index 属性来自定义索引
   // label:null,//显示的标题
    'column-key':null,//column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
   // prop:null,//字段名称 对应列内容的字段名， 也可以使用 property属性
    width:null,//对应列的宽度
    'min-width':null,//对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
    fixed:null,//列是否固定在左侧或者右侧。 true 表示固定在左侧
    'render-header':null,//列标题 Label 区域渲染使用的 Function
    sortable:null,//对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
    ':sort-method':null,//指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number
    'sort-by':null,//指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推
    'sort-orders':null,//数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
    resizable:null,//对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
    formatter:null,//用来格式化内容
    'show-overflow-tooltip':null,//当内容过长被隐藏时显示 tooltip
    align:null,//对齐方式
    'header-align':null,//表头对齐方式， 若不设置该项，则使用表格的对齐方式
    'class-name':null,//列的 className
    'label-class-name':null,//当前列标题的自定义类名
    selectable:null,//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
    'reserve-selection':null,//数据刷新后是否保留选项，仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。
    filters:null,//数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
    'filter-placement':null,//过滤弹出框的定位
    'filter-multiple':null,//数据过滤的选项是否多选
    'filter-method':null,//数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
    'filtered-value':null,//选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。

    }
    属性.value=原生属性

    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')


</script>
<style  scoped>

</style>
